<template>
    <div class="recommend">
        <van-divider content-position="left" style="margin: 0; border-color: #000">
            <p class="sub-title">猜你喜欢</p>
        </van-divider>
        <div class="rec-list">
            <div class="rec-item" v-for="item in recommendList" @click="$router.push('/article-detail')">
                <div class="img-box">
                    <van-image
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src="item.imageUrl"
                    />
                </div>
                <div class="content-box">
                    <p class="title">{{ item.title }}</p>
                    <p class="sub-title">{{ item.subTitle }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Divider, Image } from 'vant';
    export default {
        name: 'recommend',
        components: {
          'van-divider': Divider,
          'van-image': Image
        },
        data() {
            return {
                recommendList: []
            }
        },
        created() {
            this.$API.home.recommend.list().then(res => {
                this.recommendList = res.data
            })
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
.recommend {
    .sub-title {
        font-size: 32px;
    }
    .rec-list {
        padding: 0 10px;
        @include flexBox(flex-start, flex-start, row, wrap);
        .rec-item {
            background: #fff;
            border-radius: 10px;
            margin: 0 10px 20px 10px;
            width: 345px;
            overflow: hidden;
            .img-box {
                width: 345px;
                height: 345px;
            }
            .content-box {
                padding:  10px;
                .title {
                    font-size: 32px;
                    margin: 10px 0;
                }
                .sub-title {
                    font-size: 24px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
